import React, { Component } from 'react';
import { Button } from 'antd-mobile';
import IconInfoLarge from '../images/info_large.png';
import {isiOS, getWechatId} from '../utils';

/**
 * 未绑定设备的提示界面
 */
class NotBindTips extends Component {

    componentDidMount(){
        document.title = localStorage.getItem('device_name');
        sessionStorage.setItem('exit',true);
    }

    bindDevice() {
        if(isiOS()) {
            window.location.href = window.location.protocol+'//'+window.location.host+'/?func=wxbind&wechat_id='+getWechatId();
        }else {
            this.props.history.push({
                pathname: '/wxbind',
            });
        }
    }

    render() {
        return (
            <div style={{ height: document.documentElement.clientHeight, width: '100%', background: '#ffffff' }}>
                <div style={{ display: "flex", alignItems: "center", width: '100%', height: '100%', justifyContent: 'center' }}>
                    <div style={{ width: '100%', textAlign: 'center' }}>
                        <div style={{ display: "flex", alignItems: "center", width: '100%', justifyContent: 'center' }}>
                            <img src={IconInfoLarge} alt='' style={{ height: 48, width: 48 }} />
                        </div>
                        <p style={{ marginBottom: 16, marginTop: 10, color: '#424242', fontSize: 15 }}>
                            您还没有绑定过任何设备
                        </p>
                        <div style={{ display: "flex", alignItems: "center", width: '100%', justifyContent: 'center' }}>
                            <Button type="ghost" style={{ width: '80%', marginTop: 16, marginBottom: 26, height: 46 }} onClick={this.bindDevice.bind(this)}>立即绑定</Button>
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}

export default NotBindTips;